<script setup lang="ts"></script>

<template>
  <h3>网格布局练习</h3>
  <div class="wrapper">
    <div class="one item">One</div>
    <div class="two item">Two</div>
    <div class="three item">Three</div>
    <div class="four item">Four</div>
    <div class="five item">Five</div>
    <div class="six item">Six</div>
  </div>
</template>

<style scoped lang="scss">
.wrapper {
  display: grid;
  /*  声明列的宽度  */
  grid-template-columns: repeat(3, 1fr);
  /*  声明行的高度  */
//   grid-template-rows: 100px 200px 300px;
  grid-auto-rows: minmax(100px, auto);
  /*  声明行间距和列间距  */
  grid-gap: 20px;
  .one {
    grid-column: 1 / 2;
    grid-row: 1;
    background: #19caad;
  }
  .two {
    grid-column: 2 / 4;
    grid-row: 1 / 3;
    background: #8cc7b5;
  }
  .three {
    grid-column: 1 / 2;
    grid-row: 2 / 5;
    background: #d1ba74;
  }
  .four {
    grid-column: 3;
    grid-row: 3;
    background: #bee7e9;
  }
  .five {
    grid-column: 2 / 3;
    grid-row: 3 / 5;
    background: #e6ceac;
  }
  .six {
    grid-column: 3;
    grid-row: 4 / 5;
    background: #ecad9e;
  }
  .item {
    text-align: center;
    font-size: 100%;
    color: #fff;
  }
}
</style>
